import Taro, { Component } from '@tarojs/taro'
import { ScrollView, View } from '@tarojs/components'
import { AtActivityIndicator, AtIcon } from 'taro-ui'

import { host } from '../../utils/config';
import { rpc } from '../../utils/util'
import Article from '../article'

import './index.scss'

export default class PageView extends Component {
  constructor(props) {
    super(props)

    this.api = props.api || '/v2/shares'

    this.state = {
      upLoading: false,
      downLoading: false,
      data: [],
      page: 1,
      per_page: 10,
      total: 0,
      loadMore: true // 是否有更多数据
    }
  }

  componentDidMount() {
    this.init()
  }

  init = () => {
    this.loadMore()
  }

  loadMore = () => {
    const { page, per_page, loadMore } = this.state
    if (!loadMore) return
    
    return new Promise((resolve, reject) => {
      rpc({ url: `${host}${this.api}` }, { page, per_page }).then(res => {
        // console.log("datas", res)
        const preData = [...this.state.data]
        const data = preData.concat(res.articles || [])
        const total = res.meta.number || res.meta.number_of_update
        console.log("total > data.length", total , data.length)
        this.setState({
          loadMore: total > data.length,
          data,
          total
        }, () => {
          resolve()
        })
      }).catch(e => reject())
    })
  }

  onScrollToLower = (e) => {

    this.setState({
      downLoading: true,
      page: ++this.state.page
    }, () => {

      this.loadMore().then(() => {
        this.setState({ downLoading: false })
      }).catch(() => {
        // 失败之后
        Taro.showToast({ title: '数据加载失败', icon: 'none' })
        this.setState({
          downLoading: false,
          page: --this.state.page
        })
      })

    })
  }

  render() {
    const { downLoading, page, data } = this.state
    const isEmpty = page === 1 && data.length === 0

    return (
      <View className='scroll-container'>
        <ScrollView
          className='scrollview'
          style={this.props.style || 'height: 350px'}
          scrollY
          scrollWithAnimation
          scrollTop={0}
          onScrollToLower={this.onScrollToLower}>

          {
            isEmpty ?
            (
              <View className="empty">
                <AtIcon prefixClass='icon' value='empty' size='100' color='#aaa'></AtIcon>
                <Text className="no-data">无数据</Text>
              </View>
            ) :
            data && data.map(article => (
              <Article key={article.id} article={article} />
            ))
          }

          <View style={{ display: downLoading ? 'block' : 'none' }}>
            {
              loadMore ? (
                <View className="loading-wrap">
                  <AtActivityIndicator></AtActivityIndicator>
                  <Text className='loading-text'>加载更多数据...</Text>
                </View>
              ) : (
                <View className='no-more'>
                  <Text>没有更多数据</Text>
                </View>
              )
            }
            <View style="height: 10px;background-color: #eee;"></View>
          </View>

        </ScrollView>
      </View>
    )
  }
}